<template>
	<view class="wrap">
		<view class="wrap__main">
			<view class="main__form">
				<view class="form__item">
					<view class="item__left">
						<picker mode="selector" :range="phoneTypes" @change="typeChange" range-key="nameCode">
								<text class="left__text">+{{phoneTypes[phoneTypeIndex].dialCode}}</text>
						</picker>
						<image src="@/static/icons/input_down.png" mode="widthFix" class="left__icon"></image>
					</view>
					<input type="number" v-model="mobile" maxlength="18" :placeholder="$t('login.inputPhone1')" class="item__input"/>
				</view>
			<!-- 	<view class="form__item" >
					<input type="text" v-model="code" maxlength="6" :placeholder="$t('login.codeInput')" class="item__input"/>
					 <view class="item__code">
						 <text class="code__tips" @click="getCode">{{isCountStart?`${count}s`:$t('login.getCode')}}</text>
					 </view>
				</view> -->
				<view class="form__item">
					<inputPwd :placeholder="$t('register.pwsLength')" ref="pwd"></inputPwd>
				</view>
				<view class="form__item">
					<inputPwd :placeholder="$t('register.pwsAgain')" ref="pwdRepeat"></inputPwd>
				</view>
				<view class="form__item">
					<input type="text" maxlength="20" v-model="yaoqingma" :placeholder="$t('register.inputInvite')" class="item__input"/>
				</view>
				<view class="form__tips">
					<image src="@/static/icons/empty_icon.png" mode="widthFix" class="tips__icon" v-if="!isAgree" @click="isAgree=!isAgree"></image>
					<image src="@/static/icons/empty_active_icon.png" mode="widthFix" class="tips__icon" v-else @click="isAgree=!isAgree"></image>
					{{$t('register.agreeTips')}} <text class="tips__text" @click="navClick('mine.protocol')">{{$t('register.agreement')}}</text><text class="tips__text" 
					@click="navClick('mine.privacy')">{{$t('register.privacy')}}</text>
				</view>
			</view>
			<view class="main__btn" @click="registerClick">{{$t('register.title')}}</view>
			
			
			<view class="wrap__footer1">
			<picker @change="langChange" :value="langIndex" :range="langList" range-key="name" >
					<view class="item__left">
						<view class="left__value">
							<text class="value__text">{{curLang}}</text>
							<uni-icons type="right" color="#161827" size="20"></uni-icons>
						</view>
					</view>
			</picker>
			</view>
		</view>
	</view>
</template>

<script>
	import inputPwd from '@/components/common/inputPwd.vue'
	import {mapState} from 'vuex'
	import {countries} from '@/common/js/county.js'
	export default {
		components:{
			inputPwd
		},
		data() {
			return {
				phoneTypes:countries,
				phoneTypeIndex:0,
				mobile:"",    // 手機
				code:"", //驗證碼
				yaoqingma:"",  //邀请码
				isAgree:false, //是否同意
				count: 60,
				isCountStart: false, //是否開始倒計時
				timerId: null,
				curLang:"", //当前语言
				langList:[//语言列表
					{name:this.$t('language.kro'), value:"kro"},
					{name:this.$t('language.en'), value:"en"},
				],
			};
		},
		computed:{
			...mapState("user", ["urlCode", "configData"]),
			codeReg() { //验证码校验
				//return this.code.length >= 4
			}
		},
		onLoad() {
			// 获取语言信息
			let language = uni.getStorageSync("language")
			let index = this.langList.findIndex(item=>{
				return item.value === language
			})
			this.langIndex = index
			this.curLang =this.langList[index].name
			
			// 设置邀请码
			if(this.urlCode){
				this.yaoqingma = this.urlCode
			}
		},
		methods:{
			// 语言切换
			langChange(e){
				let {value} = e.detail
				this.langIndex = value
				let language = this.langList[value]
				this.curLang = language.name
				uni.setStorageSync("language", language.value)
				uni.setLocale(language.value)
				this.$i18n.locale = language.value
				uni.reLaunch({
					url: '/pages/mine/mine'
				});
			},
			// 注册点击
			async registerClick(){
				let {mobile, codeReg , yaoqingma, phoneTypes, phoneTypeIndex} = this
				if(!mobile){
					this.showToast(this.$t("login.inputPhone"))
					return
				}
				if(!codeReg){
					// this.showToast(this.$t("login.codeErr"))
					// return
				}
				let pwd = this.$refs.pwd.pwd
				let repeatPwd = this.$refs.pwdRepeat.pwd
				if(pwd.length < 6 || repeatPwd < 6){
					this.showToast(this.$t('register.pwsLength'))
					return
				}
				if(pwd !== repeatPwd){
					this.showToast(this.$t('register.pwdSame'))
					return
				}
				uni.showLoading({
					title:this.$t('loading.loading'),
					mask:true
				})
				let params = {
					prefix:phoneTypes[phoneTypeIndex].dialCode,
					mobile: this.mobile, //手机号码
					password: pwd ,
					code: this.code, //验证码
					yaoqingma:this.yaoqingma
				}
				if(!this.isAgree){
					this.showToast(this.$t('register.read'))
					return
				}
				let res = await this.$api.userRegister(params)
				uni.hideLoading()
				if(res.code === 1){
					uni.showToast({
						title:this.$t('success.success'),
						icon:"success",
						mask:true
					})
					setTimeout(()=>{
						uni.navigateBack()
					}, 1200)
				}else{
					uni.showModal({
						title:this.$t("modal.title"),
						content:res.msg,
						showCancel:false
					})
				}
			},
			// 獲取驗證碼
			async getCode() {
				let {code,codeReg,mobile,isCountStart} = this
				if (isCountStart) {
					return
				}
				if (!mobile) {
					this.showToast(this.$t('login.inputPhone'))
					return
				}
				// 获取手机验证码
				let res = await this.$api.getPhoneCode(this.mobile, "register")
				if(res.code===1){
					this.showToast("success")
					this.countHandle()
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			},
			// 類型切換
			typeChange(e){
				let {value} = e.detail
				if(this.phoneTypeIndex !== value){
					this.phoneTypeIndex = value
				}
			},
			//倒计时处理
			countHandle() {
				this.count = 60
				this.isCountStart = true
				this.count--
				this.timerId = setInterval(() => {
					if (this.count > 1) {
						this.count--
					} else {
						this.isCountStart = false
						clearInterval(this.timerId)
					}
				}, 1000)
			},
			// 提示信息
			showToast(title){
				uni.showToast({
					title,
					icon:"none"
				});
			},
			// 导航点击
			navClick(title){
				uni.navigateTo({
					url:`/pages/mine/content?title=${title}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.wrap{
		padding-top: 88rpx;
		box-sizing: border-box;
		.wrap__header{
			height: 400rpx;
			@include flexCenter();
			color: #fff;
			font-size: 60rpx;
		}
		.wrap__main{
			padding: 0 55rpx;
			box-sizing: border-box;
			.main__form{
				.form__item{
					@include flexRowAlign();
					padding: 0 30rpx;
					box-sizing: border-box;
					height: 120rpx;
					background: #282c41;
					border-radius: 12rpx;
					margin-top: 40rpx;
					&:first-child{
						margin-top: 0;
					}
					.item__left{
						@include flexRowAlign();
						font-size: 32rpx;
						color: #fff;
						.left__text{}
						.left__icon{
							width: 18rpx;
							height: 12rpx;
							margin-left: 20rpx;
							margin-right: 40rpx;
						}
					}
					.item__input{
						flex: 1;
						font-size: 32rpx;
						color: #fff;
					}
					.item__eyes{
						width: 38rpx;
						height: 28rpx;
						margin-left: 20rpx;
					}
					.item__code{
						margin-left: 20rpx;
						font-size: 30rpx;
						font-weight: bold;
						color: #458EF4;
					}
				}
			}
			.form__tips{
				@include flexRowAlign();
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
				margin-top: 32rpx;
				color: #666666;
				font-size: 28rpx;
				.tips__icon{
					width: 30rpx;
					height: 30rpx;
					margin-right: 12rpx;
				}
				.tips__text{
					color: #458EF4;
					margin-left: 8rpx
				}
			}
			.main__btn{
				@include flexCenter();
				width: 640rpx;
				height: 120rpx;
				background: #458EF4;
				border-radius: 12rpx;
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #FFFFFF;
				margin-top: 72rpx;
			}
		}
		
		.wrap__footer1{
			@include flexRowAlign(center);
			font-size: 30rpx;
			color: #161827;
			position: relative;
			width: 750rpx;
			// top: 200rpx;
			 bottom: -40rpx;
			left: 0;
			.footer__text{
				color: #458EF4;
				margin-left: 10rpx;
			}
		}
	}
</style>
